<html>
	<head>
		<!--<link rel="stylesheet" href="screen.css" type="text/css" />-->
		<title>R2 Mobile</title>
		
		<meta name="viewport" content="user-scalable=no, width=device-width" />
		
		<link rel="stylesheet" href="css/r2.css" type="text/css">
		<script src="js/r2.core.js"></script>
                <script src="js/r2.query.js"></script>
	</head>
	<body id="main">

	</body>
	
	<script>
	
	/*
		les boutons
		Les transitions d'un formulaire à un autre (tenter le hide show dans un 1er temps)

	*/
		
		r2('#main').create('r2-webapp',{attributes:{id:"webapp01"}});
			
			r2('#webapp01').create('r2-header',{
				attributes:{
					id:"header"
				},
				properties:{
					innerHTML:"k33g.org"
				}
			});
			
			r2('#webapp01').create('r2-footer',{
				attributes:{
					id:"footer"
				},
				properties:{
					innerHTML:"R2D2"
				}
			});			
			
			r2('#webapp01').create('r2-form',{attributes:{id:"form01"}});
	
				r2('#form01').create('r2-group',{attributes:{id:"group01"}});
		
					r2('#group01').create('input',{
						attributes:{
							id:"txtMail",
							/*'class':'r2-field',*/
							placeholder:'mail@domain',
							type:'text'
						}
						
					});
	
					r2('#group01').create('input',
					{
						attributes:{
							id:"mytext",
							value:"Hello",
							style:'color:red',
							type:'text'
							/*'class':'r2-field'*/
						}
					});
					
					r2('#group01').create('select',
					{
						attributes:{
							id:"mychoice"
						},
						properties:{
							innerHTML:[
								   '<option>hello</option>',
								   '<option>bonjour</option>',
								   '<option>morgen</option>'].join('')
						}
					});
					
					
					
					/*
					 <select><option>Select</option><option>Another</option></select>
					*/
					
					
		
			r2('#form01').create('r2-group',{attributes:{id:"group02"}});
		
				r2('#group02').create('textarea',
				{
					attributes:{
						id:"mytextarea",
						style:'color:green'
						/*'class':'r2-field'*/
					},
					properties:{
						innerHTML:"Hello" /*innerText:"Salut"*/
					}
				});
				
				r2('#group02').create('hr');
				
				
				r2('#group02').create('button',{
					attributes:{
						id:"btn01"
					},
					properties:{
						innerHTML:"Click Me"
					}
				});
				
				r2('#group02').create('button',{
					attributes:{
						id:"btn02"
					},
					properties:{
						innerHTML:"Click Me Bis"
					}
				});
				
				r2('#group02').create('button',{
					attributes:{
						id:"btn03"
					},
					properties:{
						innerHTML:"check ???"
					}
				});
				
				r2('#group02').create('button',{
					attributes:{
						id:"btn04"
					},
					properties:{
						innerHTML:"Change attribute"
					}
				});
				
				r2('#group02').create('button',{
					attributes:{
						id:"btn05"
					},
					properties:{
						innerHTML:"Change property"
					}
				});				
				
				r2('#btn04').click(function(){
					
					/*
						TODO:.placeholder, .style etc ....
					*/
					
					r2('#txtMail').attribute("style","color:red");
					r2('#txtMail').attribute("placeholder","hello@world");
					
					r2('input').attribute("style","color:blue");
					
				});

				r2('#btn05').click(function(){
					//r2('#mytext').value("Clicked !!!!");
					//r2('#mycheck01').checked(true);
					r2('#btn04').property("innerHTML","boudiou ...");
				});				
				
				
				r2('#btn01').click(function(){
					r2('#mytext').value("Clicked !!!!");
					r2('#mycheck01').checked(true);
				});
				
				r2('#btn02').click(function(){
					r2('#txtMail').value(r2('#mytext').value());
					r2('#mycheck01').checked(false);
				});
				
				r2('#btn03').click(function(){
					r2('#txtMail').value(r2('#mycheck01').checked());
					
					
					r2('#mytext').value(
						r2('#myradio01').value()+" : "+r2('#myradio01').checked()+" "+
						r2('#myradio02').value()+" : "+r2('#myradio02').checked()
					);

				});
				
			r2('#form01').create('r2-group',{attributes:{id:"group03"}});	
				r2('#group03').create('input',
				{
					attributes:{
						id:"mycheck01",
						type:'checkbox'
						
					},
					properties:{
						checked:false
					}
				});
			
				r2('#group03').create('input',
				{
					attributes:{
						id:"myradio01",
						type:'radio',
						name:'choice',
						value:"choice one"
						
					},
					properties:{
						checked:false
					}
				});
				
				r2('#group03').create('input',
				{
					attributes:{
						id:"myradio02",
						type:'radio',
						name:'choice',
						value:"choice two"
						
					},
					properties:{
						checked:false
					}
				});			
			
                        /*
					<r2-list id="anotherlist">
						<ul> 
							<li><a href="www.k33g.org">K33g.org</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="...">???</a></li>
						</ul>

					</r2-list> <!--end anotherlist-->
                        */
                        r2('#form01').create('r2-group',{attributes:{id:"group04"}});	
                        r2('#group04').create('r2-list',{attributes:{id:"mylist"}});
                        r2('#mylist').create('ul',{attributes:{id:"ul01"}});
                        r2('#ul01').create('li',{
                            attributes:{id:"ul01_li01"},
                            properties:{
                                innerHTML:'<a href="www.k33g.org">K33g.org</a>'
                            }
                        });
                        r2('#ul01').create('li',{
                            attributes:{id:"ul01_li02"},
                            properties:{
                                innerHTML:'<a href="about.html">About</a>'
                            }
                        });
                        r2('#ul01').create('li',{
                            attributes:{id:"ul01_li03"},
                            properties:{
                                innerHTML:'<a href="...">???</a>'
                            }
                        });                         
                        
                        
			r2('#form01').create('r2-content',{attributes:{id:"content01"}});
				
				r2('#content01').create('div',{
					attributes:{id:'p01'},
					properties:{
						innerHTML:[
							'<H2>A propos :</H2>',
							'<p>',
							'Ceci est un commentaire sur R2D2',
							'</p>',
							'<hr>',
							'<p>',
							'Ceci est un autre commentaire sur R2D2',
							'</p>'
						].join('')
					}
				});
				
				r2('#content01').create('input',
				{
					attributes:{
						id:"mytextBis",
						value:"Hello",
						style:'color:red',
						type:'text'
						/*'class':'r2-field'*/
					}
				});
				
				r2('#content01').create('textarea',
				{
					attributes:{
						id:"mytextareaBis",
						style:'color:green',
						/*'class':'r2-field'*/
					},
					properties:{
						innerHTML:"Hello" /*innerText:"Salut"*/
					}
				});
	
			//r2('input').setValue('XXXX');
	
	</script>
</html>